<template>
	<div>
		<div>
			<el-form :inline="true" :model="queryObj" class="demo-form-inline">
				<el-form-item>
					<el-input v-model="queryObj.name" placeholder="请输入搜索关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button  type="primary" icon="el-icon-search" @click="Query()"></el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="ofOpenAdd()">新增</el-button>
					<!-- 打开新增页面 -->
					<el-dialog title="新增" :visible.sync="dialogVisible" width="30%">
						<el-form :model="adminaList" label-width="80px">
							<el-form-item label="姓名">
								<el-input v-model="adminaList.name"></el-input>
							</el-form-item>
							<el-form-item label="手机号码:">
								<el-input v-model="adminaList.phone"></el-input>
							</el-form-item>
							<el-form-item label="住宅号码:">
								<el-input v-model="adminaList.telephone"></el-input>
							</el-form-item>
							<el-form-item label="联系地址:">
								<el-input v-model="adminaList.address"></el-input>
							</el-form-item>
							<el-form-item label="状态:">
								<el-radio v-model="adminaList.enabled" label="1">正常</el-radio>
								<el-radio v-model="adminaList.enabled" label="2">停用</el-radio>
							</el-form-item>
							<el-form-item label="用户名:">
								<el-input v-model="adminaList.username"></el-input>
							</el-form-item>
							<el-form-item label="密码:">
								<el-input v-model="adminaList.password"></el-input>
							</el-form-item>
							<el-form-item label="用户图像:">
								<el-input v-model="adminaList.userFace"></el-input>
							</el-form-item>
							<el-form-item label="备注:">
								<el-input v-model="adminaList.remark"></el-input>
							</el-form-item>
							<el-form-item label="加密盐值">
								<el-input v-model="adminaList.slot"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="dialogVisible = false">取 消</el-button>
							<el-button type="primary" @click="openAdd">确 定</el-button>
						</span>
					</el-dialog>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="deleteByIds()">批量删除</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div>
			<div id="app">
				<el-table :data="lists" style="width: 100%;" ref="multipleTable" tooltip-effect="dark"
					@selection-change="handleSelectionChange">
					<!-- 全选框 -->
					<el-table-column type="selection" width="30">
					</el-table-column>

					<el-table-column prop="id" label="编号" width="50">
					</el-table-column>

					<el-table-column prop="name" label="姓名" width="90">
					</el-table-column>

					<el-table-column prop="phone" label="手机号码" width="120">
					</el-table-column>

					<el-table-column prop="telephone" label="住宅电话" width="100">
					</el-table-column>

					<el-table-column prop="address" label="联系地址" width="190">
					</el-table-column>

					<el-table-column prop="" label="是否启用" width="180">
						<template slot-scope="scope">
							<el-radio-group v-model="scope.row.enabled">
								<el-radio-button :label="1">启用</el-radio-button>
								<el-radio-button :label="0">关闭</el-radio-button>
							</el-radio-group>
						</template>
					</el-table-column>

					<el-table-column prop="username" label="用户名" width="80">
					</el-table-column>

					<el-table-column prop="password" label="密码" width="200">
					</el-table-column>

					<el-table-column prop="userFace" label="用户图像" width="60">
					</el-table-column>

					<el-table-column prop="remark" label="备注" width="80">
					</el-table-column>

					<el-table-column prop="slot" label="加密盐值" width="80">
					</el-table-column>
					
					<el-table-column prop="footer" label="操作" width="200px">
					
						<template slot-scope="scope" >
							<el-button type="primary" icon="el-icon-edit" circle @click="openUpdate(scope.row)"></el-button>
							<!-- 点击修改弹框，带有默认值-->
							<el-dialog title="修改" :visible.sync="dialogUpdate" width="30%">
								<el-form :model="adminaList" label-width="80px">
									<el-form-item label="编号:">
										<el-input v-model="adminaList.id" readonly></el-input>
									</el-form-item>
									<el-form-item label="姓名:">
										<el-input v-model="adminaList.name"></el-input>
									</el-form-item>
									<el-form-item label="手机号码">
										<el-input v-model="adminaList.phone"></el-input>
									</el-form-item>
									<el-form-item label="住宅电话">
										<el-input v-model="adminaList.telphone"></el-input>
									</el-form-item>
									<el-form-item label="联系地址">
										<el-input v-model="adminaList.address"></el-input>
									</el-form-item>
									<el-form-item label="是否启用:">
										<el-radio-group v-model="adminaList.enabled">
											<el-radio :label="1">正常</el-radio>
											<el-radio :label="0">停用</el-radio>
										</el-radio-group>
									</el-form-item>
									<el-form-item label="用户名">
										<el-input v-model="adminaList.username"></el-input>
									</el-form-item>
									<el-form-item label="密码">
										<el-input v-model="adminaList.password"></el-input>
									</el-form-item>
									<el-form-item label="用户图像">
										<el-input v-model="adminaList.userFace"></el-input>
									</el-form-item>
									<el-form-item label="备注">
										<el-input v-model="adminaList.remark"></el-input>
									</el-form-item>
									<el-form-item label="加密盐值">
										<el-input v-model="adminaList.slot"></el-input>
									</el-form-item>
								</el-form>
								<span slot="footer" class="dialog-footer">
									<el-button @click="dialogUpdate = false">取 消</el-button>
									<el-button type="primary" @click="ofUpdate">确 定</el-button>
								</span>
							</el-dialog>
							<el-button type="danger" icon="el-icon-delete" circle @click="DeleteData(scope.row.id)" plain></el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页-->
				<div>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="queryObj.currentPage" :page-sizes="[3, 5, 10, 20]" :page-size="queryObj.sizePage"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

				total: 20,

				//查询封装的参数
				queryObj: {
					name: "",
					currentPage: 1,
					sizePage: 4,
				},

				//修改弹框属性
				dialogUpdate: false,

				//用户对象
				adminaList: {
					id: '',
					name: '',
					phone: '',
					telephone: '',
					address: '',
					enabled: '',
					username: '',
					password: '',
					userFace: '',
					remark: '',
					slot: '',
				},

				//表格中数据、由后端传入
				lists: [],

				//关于批量删除的id
				ids: [],

				//关于新增页面
				dialogVisible: false,

			}
		},
		methods: {

			/* 确定添加方法 */
			openAdd() {
				//关闭弹框
				this.dialogVisible = false;
				//console.log(this.student);
				this.postRequest('/admin/save', this.adminaList).then(result => {
					//console.log(result.code);
					this.queryDate();
				});
			},

			/* 打开新增页面方法 */
			ofOpenAdd() {
				this.adminaList.id = "";
				this.adminaList.name = "";
				this.adminaList.phone = "";
				this.adminaList.telephone = "";
				this.adminaList.address = "";
				this.adminaList.enabled = "";
				this.adminaList.username = "";
				this.adminaList.password = "";
				this.adminaList.userFace = "";
				this.adminaList.remark = "";
				this.adminaList.slot = "";
				this.dialogVisible = true;
			},


			//打开修改弹框，并赋予默认值
			openUpdate(row) {
				this.adminaList.id = row.id;
				this.adminaList.name = row.name;
				this.adminaList.phone = row.phone;
				this.adminaList.telephone = row.telephone;
				this.adminaList.address = row.address;
				this.adminaList.username = row.username;
				this.adminaList.password = row.password;
				this.adminaList.userFace = row.userFace;
				this.adminaList.remark = row.remark;
				this.adminaList.slot = row.slot;
				this.dialogUpdate = true;
			},

			//确定修改
			ofUpdate() {
				this.dialogUpdate = false;

				this.putRequest('/admin/saveUpdate', this.adminaList).then(result => {
					this.queryDate();
				});
			},

			/* 删除单个数据*/
			DeleteData(id) {
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					console.log(id);
					//this.id=id;
					this.deleteRequest('/admin/delOne/' + id).then(res => {
						if (this.total % this.queryObj.sizePage === 1) {
							this.queryObj.currentPage--;
						}
						this.queryDate();
					});

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},


			/* 批量删除数据 */
			deleteByIds() {
				this.$confirm('此操作将永久删除选中记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if (this.ids.length != 0) {

						this.deleteRequest('/admin/delBatch', this.ids).then(result => {
							if (this.ids.length === this.lists.length) {
								this.queryObj.currentPage--;
							}
							this.queryDate();
						})

					} else {
						this.$message({
							type: 'info',
							message: '无选中记录！'
						});
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

			//复选框获取id,用于批量删除
			handleSelectionChange(val) {
				var idm = [];
				for (let list of val) {
					idm.push(list.id);
				}
				this.ids = idm;
				//console.log(this.ids);
			},

			// 分页用到的方法
			handleSizeChange(val) {

				console.log(`每页 ${val} 条`);
				this.queryObj.sizePage = val;
				this.queryDate();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.queryObj.currentPage = val;
				this.queryDate();
			},

			//页面加载完之后调用的方法
			queryDate() {
				this.postRequest('/admin/likeQuery', this.queryObj).then(result => {
					//console.log(result.data);
					this.lists = result.data.list;
					this.total = result.data.total;
				})
			},

			/* 模糊查询 */
			Query() {
				this.queryDate();
			},
		},
		//页面加载完成调用的方法
		mounted() {
			this.queryDate();
		},
	}
</script>
<style>
</style>
